<!--  -->
<template>

  <div>
    <h3>当前的数字为:{{$store.state.num}}</h3>
    <h3>当前的数字为乘以10结果为---{{$store.getters.bigNum}}</h3>
    <select name=""
            id=""
            v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="addOdd(n)">当为奇数时才加</button>
    <button @click="addWait(n)">异步操作加法</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 默认的多项框的选中值
      n: 1
    }
  },
  methods: {
    increment (n) {
      this.$store.commit('JIA', n)
    },
    decrement (n) {
      this.$store.commit('JIAN', n)
    },
    addOdd (n) {
      this.$store.dispatch('addOdd', n)
    },
    addWait (n) {
      this.$store.dispatch('addWait', n)
    }
  },
  computed: {
    // bigNum () {
    //   return this.$store.state.num * 10
    // }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
</style>